<template>
  <div class="search-container">
    <a-form
      :model="model"
      ref="searchFormRef"
      :label-col="{ span: 0 }"
      :wrapper-col="{ span: 24 }"
    >
      <a-row :gutter="gutter" :style="[styleRowGap]">
        <slot />
      </a-row>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed } from "vue";
import { useStyle } from "@/hook/index";
import type { FormInstance } from "ant-design-vue";
interface ExposedProps {
  reset: () => void;
  // 其他暴露的属性
}
// hook
const { rowGap } = useStyle();
/**
 * props
 */
const props = defineProps({
  gutter: {
    type: Number,
    default: 16,
  },
  sapce: {
    type: Number,
    default: 16,
  },
  model: {
    type: Object,
    default: () => ({}),
  },
});
/**
 * 表单对象
 */
const searchFormRef = ref<FormInstance>();
/**
 * 重置
 */
const reset = () => searchFormRef.value?.resetFields();
// 行间距
const styleRowGap = computed(() => rowGap(props.sapce));

defineExpose({ reset });
</script>
<style lang="scss">
.search-container {
}
</style>
